<template>
	<div class="fx-transfer">
		<div class="list-container">
			<div class="fx-block-title">{{leftTitle}}</div>
			<w-table
				ref="listTableUnSelect"
				:tableColumn="tableColumn"
				:listData="unSelectTableData"
				:listTotal="unSelectTableData.length || 0"
				:showPagination="false"
				:selectedRows.sync="defaultUnSelect"
				:showColumnFilterBtn="false"
				minWidth="100px"
				class="listTable"
			>
				<div slot="btn-tools-right" class="tools-right">
					<el-input
						v-model="unSelectTableSearchKey"
						placeholder="请输入内容"
						prefix-icon="el-icon-search"
						size="mini"
						@input="onUnSelectSearchKeyChange"
					>
					</el-input>
				</div>
			</w-table>
		</div>
		<div class="tools-container">
			<el-button class="tools-btn" icon="el-icon-d-arrow-right" @click="onSelectAllEmployee"></el-button>
			<el-button class="tools-btn" icon="el-icon-arrow-right" @click="onSelectEmployee"></el-button>
			<el-button class="tools-btn" icon="el-icon-arrow-left" @click="onUnSelectEmployee"></el-button>
			<el-button class="tools-btn" icon="el-icon-d-arrow-left" @click="onUnSelectAllEmployee"></el-button>
		</div>
		<div class="list-container">
			<div class="fx-block-title">{{rightTitle}}</div>
			<w-table
				ref="listTableSelect"
				:tableColumn="tableColumn"
				:listData="selectTableData"
				:listTotal="selectTableData.length || 0"
				:showPagination="false"
				:selectedRows.sync="defaultSelect"
				:showColumnFilterBtn="false"
				minWidth="100px"
				class="listTable"
			>
				<div slot="btn-tools-right" class="tools-right">
					<el-input
						v-model="selectTableSearchKey"
						placeholder="请输入内容"
						prefix-icon="el-icon-search"
						size="mini"
						@input="onSelectSearchKeyChange"
					>
					</el-input>
				</div>
			</w-table>
		</div>
	</div>
</template>
<script>
/**
 * transfer by shang 2020/12/4
 * @desc transfer 穿梭框
 * @params value[Array] 已选id
 * @params tableColumn[Array] 列模型
 * example:
 * [
		{ prop: 'code', label: '品项编号', required: true, width: '150px' },
		{ prop: 'name', label: '品项名称', required: true },
		{ prop: 'spec', label: '规格', required: true },
		{
			prop: 'inventory',
			label: '库存',
			required: true,
			formatter: row => row.inventory ? '充足' : '缺货'
		}
	]
 * @params tableData[Array] 穿梭框数据
 * @params filter[Function] 数据筛选方法
 * @params searchProps[Array] 穿梭框模糊搜索 key 默认 'name'
 * @params leftTitle[String] 左标题
 * @params rightTitle[String] 右标题
 */
export default {
	name: 'w-transfer',
	props: {
		value: {
			type: Array,
			default: () => {
				return []
			}
		},
		tableColumn: {
			type: Array,
			default: () => {
				return []
			}
		},
		tableData: {
			type: Array,
			default: () => {
				return []
			}
		},
		filter: Function,
		searchProps: {
			type: Array,
			default: () => {
				return ['name']
			}
		},
		leftTitle: String,
		rightTitle: String
	},
	data () {
		return {
			defaultUnSelect: [],
			defaultSelect: [],
			unSelectTableSearchKey: '',
			selectTableSearchKey: ''
		}
	},
	computed: {
		tableDataComputed () {
			return this.tableData.filter(item => {
				return this.$fxUtils.toRawType(this.filter) !== 'Function' || this.filter(item)
			})
		},
		unSelectTableData () {
			return this.tableDataComputed.filter(item => {
				return !this.value.includes(item.id) && this.$fxUtils.fuzzyQueryObj(item, this.unSelectTableSearchKey, this.searchProps)
			})
		},
		selectTableData () {
			return this.tableDataComputed.filter(item => {
				return this.value.includes(item.id) && this.$fxUtils.fuzzyQueryObj(item, this.selectTableSearchKey, this.searchProps)
			})
		}
	},
	watch: {
		tableData: {
			immediate: true,
			handler (val) {
				this.defaultUnSelect = []
				this.defaultSelect = []
				this.unSelectTableSearchKey = ''
				this.selectTableSearchKey = ''
			}
		}
	},
	methods: {
		onUnSelectSearchKeyChange () {
			this.defaultUnSelect = []
		},
		onSelectSearchKeyChange () {
			this.defaultSelect = []
		},
		onSelectEmployee () {
			this.$refs.listTableUnSelect.getSelectedRows().then(res => {
				const selecteds = res.map(item => {
					return item.id
				})
				this.$emit('input', [...this.value, ...selecteds])
				this.defaultUnSelect = []
			})
		},
		onUnSelectEmployee () {
			this.$refs.listTableSelect.getSelectedRows().then(res => {
				const unSelecteds = res.map(item => {
					return item.id
				})
				const selecteds = this.value.filter(item => {
					return !unSelecteds.includes(item)
				})
				this.$emit('input', selecteds)
				this.defaultSelect = []
			})
		},
		onSelectAllEmployee () {
			const selecteds = this.tableData.map(item => {
				return item.id
			})
			this.$emit('input', selecteds)
			this.defaultUnSelect = []
		},
		onUnSelectAllEmployee () {
			this.$emit('input', [])
			this.defaultSelect = []
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.fx-transfer {
	display: flex;
	flex-direction: row;
	flex: 1;
	.list-container {
		flex: 1
		overflow:auto
		display: flex;
		flex-direction: column;
	}
	.tools-container {
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center
		width: 100px
		.tools-btn {
			width: 50px
			margin-top: 20px
			margin-left: 0
		}
	}
}
</style>
